<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <link rel="stylesheet" href="../css/reset.css" />
  <link rel="stylesheet" href="../css/mui.css" />
  <link rel="stylesheet" href="../css/icon-daguanjia.css" />
  <style type="text/css">
    .nav-liter {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 50px;
      background-color: #fff;
      border: 1px solid #f3f3f3;
    }
    
    .nav-name {
      font-size: 14px;
      color: rgba(39, 42, 51, .6);
    }
    
    .nav-name a {
      color: rgba(39, 42, 51, .6);
      margin-right: 3px;
    }
    
    .mui-table-view-cell>a:not(.mui-btn) {
      display: flex;
      align-items: center;
    }
    
    .mui-table-view-cell a img {
      width: 106px;
      height: 80px;
      border-radius: 2px;
    }
    
    .mui-icon-extra {
      font-size: 14px;
    }
    
    .item-info {
      margin-left: 12px;
      flex: 1;
    }
    
    .info-cont {
      margin-top: 10px;
    }
    
    .info-tag {
      margin-top: 8px;
    }
    
    .info-tag-item {
      display: inline-block;
      border: 1px solid #444;
      border-radius: 15px;
      color: #444;
      font-size: 12px;
      padding: 0 5px;
      margin-right: 5px;
    }
    
    .info-tag-item-active {
      display: inline-block;
      border: 1px solid rgb(255, 125, 51);
      border-radius: 15px;
      color: rgb(255, 125, 51);
      font-size: 12px;
      padding: 0 5px;
      margin-right: 5px;
    }
    
    .info-desc {
      display: flex;
      margin-top: 8px;
      justify-content: space-between;
      line-height: 1;
      font-size: 14px;
    }
    
    .info-desc-price {
      color: rgb(255, 36, 36);
    }
    
    .price-size {
      font-size: 18px;
      font-weight: 600;
    }
    
    .info-desc-color {
      color: rgb(177, 177, 177);
    }
    
    .mui-content>.mui-table-view:first-child {
      margin-bottom: 15px;
    }
    
    .mui-table-view:before,
    .mui-table-view:after {
      background-color: transparent;
    }
  </style>
</head>

<body style="letter-spacing: 1px;">
  <header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title"></h1>
  </header>
  <div class="mui-content">
    <!-- <div class="list-filter">
      <ul class="nav-liter">
        <li class="nav-name mui-icon-extra icon-dgj-xiangxia">
          <a href="javascript:;">距离</a>
        </li>
        <li class="nav-name mui-icon-extra icon-dgj-xiangxia">
          <a href="javascript:;">价格</a>
        </li>
        <li class="nav-name mui-icon-extra icon-dgj-xiangxia">
          <a href="javascript:;">分类</a>
        </li>
      </ul>
    </div> -->
    <ul class="mui-table-view" id="taskList">
      <!-- <li class="mui-table-view-cell">
        <a href="task_detail_A.html">
          <img src="../images/item_test.png" />
          <dl class="item-info">
            <dt class="info-title"><h4>我需要一个电工,急急急</h4></dt>
            <dd class="info-cont">
              <h5>家里灯泡坏了，我要换灯泡</h5>
            </dd>
            <dd class="info-tag"><span class="info-tag-item-active">专业技能任务</span></dd>
            <dd class="info-desc">
              <span class="info-desc-price"><i class="mui-icon-extra icon-dgj-rmb"></i><span class="price-size">49</span>.99</span>
              <span class="mui-icon-extra icon-dgj-juli info-desc-color">3.7km</span>
              <span class="mui-icon-extra icon-dgj-shijian info-desc-color">30分钟前</span>
            </dd>
          </dl>
        </a>
      </li>
      <li class="mui-table-view-cell">
        <a href="task_detail_A.html">
          <img src="../images/item_test.png" />
          <dl class="item-info">
            <dt class="info-title"><h4>我需要一个电工,急急急</h4></dt>
            <dd class="info-cont">
              <h5>家里灯泡坏了，我要换灯泡</h5>
            </dd>
            <dd class="info-tag"><span class="info-tag-item-active">专业技能任务</span></dd>
            <dd class="info-desc">
              <span class="info-desc-price"><i class="mui-icon-extra icon-dgj-rmb"></i><span class="price-size">49</span>.99</span>
              <span class="mui-icon-extra icon-dgj-juli info-desc-color">3.7km</span>
              <span class="mui-icon-extra icon-dgj-shijian info-desc-color">30分钟前</span>
            </dd>
          </dl>
        </a>
      </li>
      <li class="mui-table-view-cell">
        <a href="task_detail_A.html">
          <img src="../images/item_test.png" />
          <dl class="item-info">
            <dt class="info-title"><h4>我需要一个电工,急急急</h4></dt>
            <dd class="info-cont">
              <h5>家里灯泡坏了，我要换灯泡</h5>
            </dd>
            <dd class="info-tag"><span class="info-tag-item">普通任务</span></dd>
            <dd class="info-desc">
              <span class="info-desc-price"><i class="mui-icon-extra icon-dgj-rmb"></i><span class="price-size">49</span>.99</span>
              <span class="mui-icon-extra icon-dgj-juli info-desc-color">3.7km</span>
              <span class="mui-icon-extra icon-dgj-shijian info-desc-color">30分钟前</span>
            </dd>
          </dl>
        </a>
      </li>
      <li class="mui-table-view-cell">
        <a href="task_detail_A.html">
          <img src="../images/item_test.png" />
          <dl class="item-info">
            <dt class="info-title"><h4>我需要一个电工,急急急</h4></dt>
            <dd class="info-cont">
              <h5>家里灯泡坏了，我要换灯泡</h5>
            </dd>
            <dd class="info-tag"><span class="info-tag-item">普通任务</span></dd>
            <dd class="info-desc">
              <span class="info-desc-price"><i class="mui-icon-extra icon-dgj-rmb"></i><span class="price-size">49</span>.99</span>
              <span class="mui-icon-extra icon-dgj-juli info-desc-color">3.7km</span>
              <span class="mui-icon-extra icon-dgj-shijian info-desc-color">30分钟前</span>
            </dd>
          </dl>
        </a>
      </li>
      <li class="mui-table-view-cell">
        <a href="task_detail_A.html">
          <img src="../images/item_test.png" />
          <dl class="item-info">
            <dt class="info-title"><h4>我需要一个电工,急急急</h4></dt>
            <dd class="info-cont">
              <h5>家里灯泡坏了，我要换灯泡</h5>
            </dd>
            <dd class="info-tag"><span class="info-tag-item-active">专业技能任务</span></dd>
            <dd class="info-desc">
              <span class="info-desc-price"><i class="mui-icon-extra icon-dgj-rmb"></i><span class="price-size">49</span>.99</span>
              <span class="mui-icon-extra icon-dgj-juli info-desc-color">3.7km</span>
              <span class="mui-icon-extra icon-dgj-shijian info-desc-color">30分钟前</span>
            </dd>
          </dl>
        </a>
      </li> -->
    </ul>
  </div>
</body>

<script src="../js/mui.js"></script>
<script src="../js/app.js"></script>
<script src="../js/http.js"></script>
<script type="text/javascript">
  (function($, doc) {
    var taskListEle = doc.getElementById('taskList');

    onload();

    function onload() {
      readTasks();

      document.querySelector('.mui-title').innerHTML = app.getQueryString('title');
    }

    function readTasks() {
      http.getToken({
        url: API.getReadTasks,
        token: $state.token,
        deviceType: app.clientType.versions.android ? 'android' : 'iphone',
        success: function(res) {
          console.log('res-->>', res);
          if (res.code === 200) {
            var taskList = res.data;
            // 页面渲染数据
            renderTaskList(taskList);
          }
        },
        error: function(err) {
          console.log('请求失败')
        }
      });
    }

    function renderTaskList(taskList) {
      var taskHtml = '';
      if (!taskList) return;
      taskList.map(function(value, index) {
        value.title = app.cutStr(value.title, 24);
        value.describe = app.cutStr(value.describe, 28);
        value.amount = value.amount.split('.');

        if (!value.images.length) {
          value.images[0] = {
            file_path: 'http://iph.href.lu/106x80?text=大管家'
          };
        }

        var aLink = 'task_detail_A.html?id=' + value.id;
        if (value.pay_state === 0) aLink = 'unpay.html?type=T&id=' + value.id + '&title=' + value.title;

        taskHtml += `<li class="mui-table-view-cell"><a href=` +
          aLink + `><img src="` +
          value.images[0].file_path +
          `"/><dl class="item-info"><dt class="info-title"><h4>` +
          value.title +
          `</h4></dt><dd class="info-cont"><h5>` +
          value.describe +
          `</h5></dd><dd class="info-tag">`;

        if (value.pay_state === 0) {
          taskHtml += `<span class="info-tag-item-active">未付款</span>`;
        }

        if (value.pay_state === 1) {
          if (value.order_do === 0) taskHtml += `<span class="info-tag-item-active">正在抢单</span>`;
          if (value.order_do === 1) {
            if (value.order_state === 0) taskHtml += `<span class="info-tag-item-active">等待开始</span>`;
            if (value.order_state === 1) taskHtml += `<span class="info-tag-item-active">等待结束</span>`;
            if (value.order_state === 2) taskHtml += `<span class="info-tag-item">任务完成</span>`;
          }

        }

        if (value.tech) taskHtml += `<span class="info-tag-item-active" >` + value.tech + `</span>`;

        taskHtml += `</dd><dd class="info-desc"><span class="info-desc-price"><i class="mui-icon-extra icon-dgj-rmb"></i><span class="price-size">` +
          value.amount[0] +
          `</span>.` +
          value.amount[1] +
          `</span><span class="mui-icon-extra icon-dgj-juli info-desc-color">3.7km</span><span class="mui-icon-extra icon-dgj-shijian info-desc-color">30分钟前</span></dd></dl></a></li>`
      });

      taskListEle.innerHTML = taskHtml;

      /* if (value.pay_state === 0) {
        var aEle = document.getElementById('aTag');
      } */
    }
  })(mui, document);
</script>

</html>